<!-- 分割线-样式类型 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="中隔线设置" name="1">
            <layout-pane label="位置">
                <div class="layout-vessel-cell-width">
                    <el-slider
                        v-model="cellWidth"
                        :step="1"
                        :min="0"
                        :max="100"
                        :show-input="false"
                        :show-input-controls="false"
                        class="slider-wrap"
                    />
                    <si-input-number
                        v-model="cellWidth"
                        :min="0"
                        :max="100"
                        :step="1"
                    />
                </div>
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiInputNumber } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'LayoutVesselCellWidth',
    components: {
        LayoutPane,
        SiInputNumber
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const cellWidth = computed({
            get: () => widget.value.widgetData.eles.customFeature.cellWidth,
            set: val => widget.value.widgetData.eles.customFeature.cellWidth = val
        })

        return {
            widget,
            cellWidth
        }
    }
})
</script>

<style lang="less" scoped>
.layout-vessel-cell-width {
    display: flex;
    align-items: center;
    .slider-wrap {
        flex: 1;
        margin-right: 15px;
    }
}
</style>